<template>
  <div class="details">
    <div v-if="shopping" class="details1">
      <div class="back">
        <span @click="toback()">返回</span>
      </div>
      <div class="avatar">
        <div class="nameLeft">
          <div class="avartar1">
            <span><a href=""><img :src="goodinfo[0].image" alt="头像"></a></span>
          </div>
          <div class="avratar2">
            <p>{{goodinfo[0].usersName}}</p>
            <button @click="Collection()" v-show="!collection">收藏</button>
            <button @click="follow()" v-show="!follow">关注</button>
          </div>
        </div>

        <div class="nameRight">
          <p>{{ shopping.numberOfViewsditys }}</p>
          <p>{{ shopping.publishTimeditys }}</p>
        </div>
      </div>
      <div class="down">
        <div class="downleft">
          <img :src="shopping.productImageditys" alt="" class="bigImg">
          <img :src="shopping.productImageditys" alt="" class="smallImg">
        </div>
        <div class="downright">
          <h2>{{ shopping.productTitleditys }}</h2>
          <p>{{ shopping.productDescriptionditys }}</p>
        </div>
      </div>
    </div>
    <div v-else="!shopping">
      <h2>没有该商品</h2>
    </div>
  </div>

</template>

<script>

import axios from 'axios'
export default {
  name: 'DetailsView',
  components: {

  },
  data() {
    return {
      shopping: [],
      goodinfo: [],
 
    }
  }
  ,
  created() {
    this.getshopping();
    this.getUserinfo();
  },

  methods: {
    toback() {
      this.$router.push("/");
    },
    getUserinfo() {
      console.log(this.$route.query.id+'商品id');
      let itemid = Number(this.$route.query.id);
      let userId = Number(this.$route.query.userId);
      if (itemid) {
        axios
          .get('/api/Commoditys/GoodDetail?id='+itemid+'&publisherUserId='+userId+'&userId='+userId)
          .then(response => {
           console.log(response.data);
           this.goodinfo=response.data.userinfo;
           
          })
          .catch((error) => {
            console.log(error)
          });
      } 

    }
    ,

    getshopping(){
      let itemid = Number(this.$route.query.id);
      if (itemid) {
        axios
          .get('/api/Commoditys/GetCommoditys')
          .then(response => {
          for(let goods of response.data){
          if(itemid==goods.id){
            this.shopping=goods;
          }
          
          }
          console.log(this.shopping);
          })
          .catch((error) => {
            console.log(error)
          });
      } 

   },
    

    }
     
  
  }


</script>
<style>
.details1 {
  display: flex;
  width: 80%;
  flex-direction: column;
  align-items: flex-start;
  margin: 50px;
  padding: 10px;
}

.details1 .back {
  margin-bottom: 20px;
}

.avatar {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.nameLeft {
  display: flex;
  width: 190px;
}

.nameLeft .avartar1 {

  margin: auto;

}
.nameLeft .avartar1 span img{
  width: 100px;
  height: 100px;
}
.down {
  display: flex;
  width: 100%;
}

.downleft {
  display: flex;
  flex-direction: column;
}

.downleft .bigImg {
  width: 500px;
  height: 500px;
  border-radius: 10px;
  margin-right: 200px;
  margin-top: 20px;
}

.downleft .smallImg {
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 10px;
  width: 80px;
  height: 80px;
}

.downright {
  width: 100%;
  text-align: center;
}
</style>